<template>
  <view>
    <u-tabbar :active="current" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
              :customStyle="{bottom:'40rpx',left:'20rpx',right:'20rpx',borderRadius:'80rpx',background:'#edebdf',boxShadow:'rgb(153 153 153) 0px 0px 20rpx'}">
      <u-tabbar-item v-for="(item, index) in tabList" :key="index" :icon="getTabbarIcon(item, index)" :text="item.text"
                     @click="handleTabbarItemClick(item, index)"></u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useMenuStore} from "@/store/menu";
import {onLoad} from '@dcloudio/uni-app'

const current = ref(0)
const tabList = ref([
  {
    key: 'home',
    iconPath: '/static/icon/home.png',
    selectedIconPath: '/static/icon/home1.png',
    pagePath: "/pages/index/index"
  },
  {
    key: 'category',
    iconPath: '/static/icon/moments.png',
    selectedIconPath: '/static/icon/moments1.png',
    pagePath: "/pages/index/view"
  },
  {
    key: 'cart',
    iconPath: '/static/icon/activity.png',
    selectedIconPath: '/static/icon/activity1.png',
    pagePath: "/pages/index/message"
  },
  {
    key: 'mine',
    iconPath: '/static/icon/me.png',
    selectedIconPath: '/static/icon/me1.png',
    pagePath: "/pages/index/user"
  }
])

const handleTabbarItemClick = (item, index) => {
  if (useMenuStore().activeTab !== index) {
    //如果点击的是扫描按钮

    useMenuStore().setActive(index)
    uni.switchTab({
      url: item.pagePath
    })

  }
}
//图标的切换
const getTabbarIcon = (item, index) => {
  return useMenuStore().activeTab === index ? item.selectedIconPath : item.iconPath
}

onLoad(()=>{
  uni.hideTabBar({})
})
</script>

<style scoped lang="scss">
/* 首页变量 */
$mainColor: #24afd6;
$iptBorColor: #999;
$f8: #f8f8f8;
$e: #eee;

// 全局变量
$tabBarHei: 120rpx; // 底部导航高度
.q-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-sizing: border-box;
  padding: 12rpx 0;
  width: 100%;
  height: $tabBarHei;
  border-top: 2rpx solid;
  z-index: 99;

  .q-tabbar-item {
    flex: 1;
    text-align: center;
    font-size: 24rpx;
  }
}
</style>